Leapcell: 세계 최첨단 Web 서비스 배포 플랫폼.

大容量ファイルアップロードを冷静に対処する方法

大容量ファイルアップロードの最適化を検討する理由

フロントエンド開発では、画像、ビデオ、オーディオファイルなどのファイルアップロードが必要となるシナリオによく遭遇します。ファイルアップロード中に、ファイルが大きすぎる場合に問題が発生することがあります。

アップロード時間が長くなり、ユーザーエクスペリエンスが低下する。
過剰なサーバー負荷とリソース消費を引き起こす。
不安定なネットワーク条件下でアップロードが失敗し、再アップロードが必要になり、時間と帯域幅を浪費する。
ブラウザのメモリ使用量が多くなり、パフォーマンスと安定性に影響する。

これらの問題に対処するには、大容量ファイルアップロードを最適化する必要があります。

現代のインターネットアプリケーションでは、ユーザーはファイルアップロードに対してますます高い要求を持っています。

ソーシャルプラットフォームで高解像度の画像やビデオを共有する。
教育プラットフォームで課題や教材を提出する。
エンタープライズプラットフォームでプロジェクトドキュメントやレポートをアップロードする。

これらのシナリオでは、ユーザーがアップロードする必要のあるファイルは非常に大きく、数百メガバイトまたは数ギガバイトに達することもあります。従来の方法でファイルアップロードを行うと、前述の問題に直面します。

従来の方法では、ファイル全体を単一のリクエストボディとしてサーバーに送信します。このアプローチにはいくつかの欠点があります。

長いアップロード時間: ファイルサイズが大きいため、データの転送に時間がかかり、ユーザーはアップロード結果を見るために長時間待つ必要があります。
高いサーバー負荷: 大量のファイルは、サーバーが一度に大量のデータを受信して処理する必要があり、過剰なサーバーメモリ、CPU、帯域幅、その他のリソースを消費する可能性があります。
不安定なネットワークで失敗しやすい: 大容量ファイルの転送は、切断、タイムアウト、パケットロスなどのネットワークの問題の影響を受けやすく、アップロードが失敗し、ユーザーはファイル全体を再アップロードすることを余儀なくされます。
高いブラウザメモリ使用量: 大容量ファイルでは、ブラウザがファイル全体をメモリに読み込んで接続を維持する必要があるため、メモリ使用量が多くなり、他のページのパフォーマンスに影響を与える可能性があります。

これらの問題に対処するには、大容量ファイルアップロードの最適化が不可欠です。

設計アプローチ

大容量ファイルアップロードを最適化するための主なアプローチは次のとおりです。

1. チャンク分割

大きなファイルを小さなチャンクに分割し、各チャンクを個別のリクエストとしてサーバーに送信します。これにより、リクエストごとのデータ量が減り、アップロード時間が短縮され、サーバーの負荷が軽減され、再開可能なアップロードが可能になります。

function sliceFile(file, chunkSize) {
  const fileSize = file.size;
  const chunks = Math.ceil(fileSize / chunkSize);
  const slices = Array.from({ length: chunks }, (_, index) => {
    const start = index * chunkSize;
    const end = start + chunkSize;
    return file.slice(start, end);
  });
  return slices;
}

2. 並行処理

複数のチャンクリクエストをサーバーに同時に送信して、ネットワーク帯域幅とサーバーリソースを最大限に活用し、ユーザーエクスペリエンスを向上させます。

async function uploadChunks(fileChunks) {
  const uploadPromises = fileChunks.map((chunk) =>
    fetch('/upload', { method: 'POST', body: chunk })
  );
  const responses = await Promise.all(uploadPromises);
  return responses;
}

3. 圧縮

各チャンクをサーバーに送信する前に圧縮して、データサイズをさらに削減し、転送効率を向上させます。

async function compressChunk(chunk) {
  const compressedChunk = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      const result = pako.deflate(event.target.result);
      resolve(result);
    };
    reader.onerror = (event) => reject(event.error);
    reader.readAsArrayBuffer(chunk);
  });
  return compressedChunk;
}

4. 検証

各チャンクを送信する前または後に検証して、データの整合性と正確性を確保し、冗長または誤ったデータ転送を回避します。

async function verifyChunk(chunk) {
  const hash = await calculateHash(chunk);
  const response = await fetch(`/verify?hash=${hash}`);
  const result = await response.json();
  return result;
}

5. 再開可能なアップロード

ネットワーク障害が発生した場合、最初からやり直すのではなく、中断した時点からアップロードを続行し、時間を節約し、速度を向上させます。

async function resumeUpload(file, resumeByte) {
  const blob = file.slice(resumeByte);
  const formData = new FormData();
  formData.append('file', blob);
  const response = await fetch('/upload', { method: 'POST', body: formData });
  const result = await response.json();
  return result;
}

6. インスタントアップロード

ファイルをスライスしてアップロードする前に、そのハッシュを計算してサーバーに送信します。サーバーが同一のファイルを見つけた場合、すぐに成功応答を返すことができ、冗長なアップロードを回避できます。

async function checkFileExists(file) {
  const hash = await calculateHash(file);
  const response = await fetch(`/check?hash=${hash}`);
  const result = await response.json();
  return result;
}